<template>
  <zeda-dialog
    v-model="visible"
    title="查看详情"
    width="1200px"
    :before-close="handleClose"
  >
    <h2 class="title">用能预算申报表</h2>
    <el-row :gutter="20">
      <el-col :span="18">
        <el-form ref="form" :model="info" :rules="rules" label-width="0">
          <el-descriptions
            :title="'编号：' + info.no"
            :column="2"
            border
            class="form"
          >
            <el-descriptions-item label="申报单位">
              {{ info.sysDeptName }}
            </el-descriptions-item>
            <el-descriptions-item label="联系人"
              >{{ info.contact }}
            </el-descriptions-item>
            <el-descriptions-item label="单位地址"
              >{{ info.unitAddress }}
            </el-descriptions-item>
            <el-descriptions-item label="联系电话"
              >{{ info.contactNumber }}
            </el-descriptions-item>
            <el-descriptions-item label="填报类型" :span="2">
              {{ info.declareType }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions
            v-for="(item, index) in info.typeConfigRecordVos"
            :key="index"
            :column="2"
            border
            class="form"
          >
            <template v-if="item.isSelected == 1">
              <el-descriptions-item label="用能事由" :span="2">
                <el-form-item :label="item.typeName" label-width="120px">
                  <el-radio-group v-model="item.isIncrease" disabled>
                    <el-radio :label="1">增加</el-radio>
                    <el-radio :label="0">减少</el-radio>
                  </el-radio-group>
                </el-form-item></el-descriptions-item
              >
              <el-descriptions-item :label="item.energyObjectName" :span="2">
                <el-form-item>
                  <el-checkbox
                    v-for="dict in item.typeConfigItemRecordVos"
                    :key="dict.name"
                    :checked="dict.isSelected == 1"
                    disabled
                  >
                    {{ dict.name }}</el-checkbox
                  >
                </el-form-item></el-descriptions-item
              >
              <el-descriptions-item :label="item.energyBudgetName" :span="2">
                <el-form-item
                  v-if="item.isUseStandard == 1"
                  label="标准"
                  label-width="160px"
                >
                  <el-input v-model="item.standardFee" disabled>
                    <template slot="append">{{
                      item.standardUnit
                    }}</template></el-input
                  >
                </el-form-item>
                <div
                  v-for="(it, idx) in item.typeConfigItemRecordVos"
                  :key="idx"
                  class="flex"
                >
                  <el-form-item
                    v-if="it.isSelected == 1"
                    :label="it.name"
                    label-width="160px"
                  >
                    <el-input v-model="it.value" disabled>
                      <template slot="append">{{
                        item.energyUnit
                      }}</template></el-input
                    >
                  </el-form-item>
                  <el-form-item
                    v-if="it.isSelected == 1"
                    label="是否计算费用"
                    label-width="120px"
                  >
                    <el-radio-group v-model="it.isCalculate" disabled>
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </el-descriptions-item>
            </template>
          </el-descriptions>
          <el-descriptions :column="2" border class="form">
            <el-descriptions-item label="用能预算利用时间" :span="2">
              {{ info.year }}年 1月1日至12月31日
            </el-descriptions-item>
            <el-descriptions-item label="申请用能预算经费" :span="2">
              {{ info.budgetFund }} 元
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="2" border class="form">
            <el-descriptions-item
              v-for="(item, index) in info.auditVoList"
              :key="index"
              :label="index < 2 ? '用能单位意见' : '用能审核单位意见'"
              :span="2"
            >
              <el-form-item
                :label="names[index]"
                :prop="'auditVoList.' + index + '.content'"
                label-width="220px"
                :rules="rules.content"
                class="mt10"
              >
                <el-input
                  v-model="item.content"
                  type="textarea"
                  :disabled="item.auditFlag == true ? false : true"
                  placeholder="请输入申报意见"
                >
                </el-input>
              </el-form-item>
              <div class="flex">
                <el-form-item
                  label="签字"
                  :prop="'auditVoList.' + index + '.signature'"
                  :rules="rules.signature"
                  label-width="90px"
                  class="flex1"
                >
                  <el-input
                    v-model="item.signature"
                    placeholder="请签字"
                    :disabled="item.auditFlag == true ? false : true"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="日期"
                  :prop="'auditVoList.' + index + '.eventTime'"
                  :rules="rules.eventTime"
                  label-width="60px"
                >
                  <el-date-picker
                    v-model="item.eventTime"
                    type="date"
                    disabled
                    value-format="yyyy-MM-dd"
                    placeholder="请选择"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
            </el-descriptions-item>
          </el-descriptions> </el-form
      ></el-col>
      <el-col :span="6">
        <ApprovalRecord v-if="isShow" :data="logList"> </ApprovalRecord>
      </el-col>
    </el-row>

    <form-button
      slot="footer"
      :show-submit-button="false"
      @cancel="handleClose"
    >
      <template>
        <el-button type="warning" size="small" @click="submit(5)"
          >退回</el-button
        >
        <el-button type="primary" size="small" @click="submit(4)"
          >通过</el-button
        >
      </template></form-button
    >
  </zeda-dialog>
</template>

    <script>
import auth from "@/plugins/auth";
import { mapState } from "vuex";
import {
  detail,
  auditBudgetDeclaration,
  getLog,
} from "@/api/work/budgetDeclaration";
import ApprovalRecord from "@/views/work/budgetDeclaration/components/approvalRecord";
import FormButton from "@/components/FormButton";

export default {
  dicts: ["energy_declare_type", "energy_identify_types"],
  components: {
    FormButton,
    ApprovalRecord,
  },
  props: {
    id: {
      type: [Number, String],
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isShow: false,
      loading: false,
      logList: [],
      names: [
        "用能单位申报部门意见",
        "用能单位负责人意见",
        "用能审核单位审核部门意见",
        "用能审核单位负责人意见",
      ],
      info: {
        identifyTypes: [],
        auditVoList: [
          {
            content: "通过",
            signature: "",
            eventTime: "",
          },
        ],
      },
      rules: {
        content: [
          {
            required: true,
            message: "请输入申报意见",
            trigger: "blur",
          },
        ],
        signature: [
          {
            required: true,
            message: "请签字",
            trigger: "blur",
          },
        ],
        eventTime: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user,
    }),
  },
  watch: {
    visible(value) {
      if (value) {
        if (String(this.id).length > 0) {
          this.getInfo();
          this.getLogInfo();
        }
      }
    },
  },
  methods: {
    getLogInfo() {
      if (auth.hasPermi("energy:budget-declare:audit-logs")) {
        this.isShow = true;
        getLog(this.id)
          .then((res) => {
            if (res.code === 700) {
              this.$message.warning(res.msg);
              return false;
            }
            this.logList = res.data.map((item) => {
              item.eventTypeName =
                item.eventType == 1
                  ? "上报"
                  : item.eventType == 2
                  ? "撤回"
                  : item.eventType == 3
                  ? "纠正"
                  : item.eventType == 4
                  ? "通过"
                  : item.eventType == 5
                  ? "驳回"
                  : item.eventType == 6
                  ? "汇总"
                  : "";
              return item;
            });
          })
          .catch(() => {
            // this.$message.error("系统错误,请联系管理员!错误码309007");
          });
      } else {
        this.isShow = false;
      }
    },
    getInfo() {
      let that = this;
      detail(that.id)
        .then((res) => {
          if (res.code === 700) {
            that.$message.warning(res.msg);
            return false;
          }
          this.info = { ...this.info, ...res.data };
          this.info.declareType = [];
          this.info.typeConfigRecordVos.map((item) => {
            this.info.declareType.push(item.typeName);
          });
          this.info.declareType = this.info.declareType.join("、");
          let arr = [];
          for (let i = 0; i < that.info.auditVoList.length; i++) {
            arr.push(that.info.auditVoList[i]);
            if (that.info.auditVoList[i].auditFlag == true) {
              break;
            }
          }
          that.info.auditVoList = arr.map((item) => {
            if (!item.content) {
              item.content = "通过";
              item.eventTime = new Date();
              item.signature = that.userInfo.nickName;
            }
            return item;
          });
          that.$refs["form"].resetFields();
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!错误码309002");
        });
    },
    submit(type) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let txt = type == 4 ? "通过" : "退回";
          this.$confirm(`确认要${txt}吗?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.loading = true;
              let auditVo = this.info.auditVoList.find(
                (item) => item.auditFlag === true
              );
              const data = {
                declareId: this.id,
                ...auditVo,
                eventType: type,
              };
              auditBudgetDeclaration(data)
                .then((res) => {
                  this.loading = false;
                  if (res.code === 700) {
                    this.$message.warning(res.msg);
                    return false;
                  }
                  this.$message.success("操作成功");
                  this.handleClose(true);
                })
                .catch(() => {
                  this.loading = false;
                  // this.$message.error("系统错误,请联系管理员!");
                });
            })
            .catch(() => {});
        } else {
          return false;
        }
      });
    },
    handleClose(status) {
      this.$refs["form"].resetFields();
      this.$emit("update:visible", false);
      this.$emit("close", status === true ? status : false);
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  text-align: center;
  font-weight: bold;
}
::v-deep .form {
  .el-descriptions__header {
    justify-content: center;
    .el-descriptions__title {
      font-weight: 100;
    }
  }
  .el-descriptions-row {
    height: 54px;
    .el-descriptions-item__cell {
      padding: 0 10px;
    }
    .el-descriptions-item__label {
      width: 140px;
      text-align: center;
    }
  }
  .el-descriptions-item__content {
    .el-form-item__content,
    .el-form-item__label {
      transform: translateY(10px);
    }
  }
  .flex {
    display: flex;
    .flex1 {
      flex: 1;
    }
  }
}
</style>
